<template>
  <div class="film-cinemas">
      <van-popup v-model="show"><van-button loading type="info" loading-text="加载中..." /></van-popup>
    <div class="film-cinemas-top">
      <van-sticky>
        <van-nav-bar
          :title="filmInfo.name"
          @click-left="back"
          @click-right="toCinemaList"
          left-arrow
        >
          <template #right>
            <van-icon name="search" size="18" />
          </template>
        </van-nav-bar>
      </van-sticky>
    </div>
    <div class="film-cinemas-date">
      <van-tabs
        swipeable
        line-width="65px"
        v-model="active"
        @click="reqCinemas()"
      >
        <van-tab
          v-for="item in showDate"
          :title="moment.unix(item.showDate).format('M月D日')"
          :key="item.showDate"
        >
        </van-tab>
      </van-tabs>
    </div>
    <div class="film-cinemas-filter">
      <van-dropdown-menu>
        <van-dropdown-item v-model="districtName" :options="distinctList" />
        <van-dropdown-item v-model="distance" :options="distanceList" />
      </van-dropdown-menu>
    </div>
    <div
      class="film-cinemas-list spaceAround"
      v-for="item in filterCinemas"
      :key="item.cinemaId"
      @click="toCinemaSchedule(item.cinemaId)"
    >
      <div class="film-cinemas-list-left">
        <div class="cinemaName fz16 pb5 ellipsis">{{ item.name }}</div>
        <div class="address fz14 ellipsis">{{ item.address }}</div>
      </div>
      <div class="film-cinemas-list-right">
        <div class="prices fz14 pb5">￥{{ item.lowPrice / 100 }}</div>
        <div class="distance fz12">距离未知</div>
      </div>
    </div>
  </div>
</template>

<script>
// import BScroll from "better-scroll";

export default {
  name: "filmCinemaList",

  data() {
    return {
    show:false,
      // active对应的是时间的索引
      active: 0,
      scroller: null,
      //   电影对应影院的时间，及每个时间有多少电影院（电影院的id）
      // cinemaList: [3171, 4025]   showDate: 1629561600
      showDate: [],
      // 当前电影有档期的影院通过aixos获取的
      curFilmCinemas: [],

      districtName: "全城",
      distance: "A",

      distanceList: [
        { text: "最近去过", value: "A" },
        { text: "离我最近", value: "B" },
      ],
    };
  },
  computed: {
    // 读取本地存储的城市
    cityInfo() {
      return (
        this.$store.state.locationCity ||
        JSON.parse(localStorage.getItem("locationCity"))
      );
    },
    // 读取本地存储的影院信息
    filmInfo() {
      //刷新时读取上一次的cityId
      console.log(JSON.parse(sessionStorage.getItem("filmInfo")));
      return (
        this.$store.state.cityInfo ||
        JSON.parse(sessionStorage.getItem("filmInfo"))
      );
    },
    // 过滤后的电影院
    filterCinemas() {
      let list = this.curFilmCinemas;
      if (this.districtName === "全城") {
        return list;
      } else {
        return list.filter((item) => item.districtName == this.districtName);
      }
    },

    distinctList() {
      let list = this.curFilmCinemas;
      //放区名
      let arr = [{ text: "全城", value: "全城" }];
      //1. 先遍历影院列表找出  区名
      //   if (list instanceof Array) {
      list.forEach((item) => {
        let flag = arr.some((district) => district.text === item.districtName);
        if (flag === false) {
          arr.push({
            text: item.districtName,
            value: item.districtName,
          });
        }
      });
      //   }
      return arr;
    },
  },
  created() {
    let that = this;
    //  var url="https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=7943003";
    this.axios
      .get(process.env.VUE_APP_BASE_URL, {
        headers: { "X-Host": "mall.film-ticket.cinema.film-show-cinema" },
        params: {
          cityId: that.cityInfo.cityId,
          filmId: that.filmInfo.filmId,
          k: 7943003,
        },
      })
      .then(function (res) {
        // console.log(res.data.data.showCinemas);
        // 获取当前的影院id和十位的时间戳
        that.showDate = res.data.data.showCinemas.sort(
          (a, b) => a.showDate - b.showDate
        );
        // 默认影院列表使用res中的第0个元素的数据
        let cityId = that.cityInfo.cityId;
        // let time = res.data.data.showCinemas[0].showDate;
        let cinemaIds = res.data.data.showCinemas[0].cinemaList.join();

        // 在axios中使用post请求再请求一次axios
        that
          .axios({
            method: "post",
            url: process.env.VUE_APP_BASE_URL,
            headers: {
              "X-Host": "mall.film-ticket.cinema.batch-cinema",
            },
            data: {
              cityId,
              cinemaIds,
            },
          })
          .then((res) => {
            console.log(res);
            that.curFilmCinemas = res.data.data.cinemas;
          })
          .catch((error) => {
            console.log(error);
          });

        //   that.$store.commit("initCinema", res.data.data.cinemas);
        //   that.show = false;
        //   that.$nextTick(() => {
        //     that.scroller = new BScroll(that.$refs.wrapper, {
        //       scrollY: true,
        //       click: true,
        //     });
        //   });
      })
      .catch(function (error) {
        console.log(error);
      });
  },
  mounted() {},


  methods: {
    toCinemaSchedule(cinemaId) {
      this.$router.push({
        path: "/cinema/" + cinemaId,
      });
    },
    reqCinemas() {
        this.show=true;
        let that=this;
         let cityId = that.cityInfo.cityId;
        let cinemaIds = that.showDate[this.active].cinemaList.join();
      that
        .axios({
          method: "post",
          url: process.env.VUE_APP_BASE_URL,
          headers: {
            "X-Host": "mall.film-ticket.cinema.batch-cinema",
          },
          data: {
            cityId,
            cinemaIds,
          },
        })
        .then((res) => {
          console.log(res);
          that.curFilmCinemas = res.data.data.cinemas;
          that.show=false;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    back() {
      this.$router.back();
    },
    toCinemaList() {
      this.$router.push({
        name: "cinemaList",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.film-cinemas-list {
  padding: 15px;
  &-left {
    width: 75%;
  }
  &-right {
    .prices {
      color: #ff5f16;
    }
  }
}
</style>
